<style lang="scss">
    .fb-alerts-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        outline: 0;
        background-color: #000;
        opacity: 0;
        z-index: 1090;
        &.in {
            opacity: 0.5;
        }
    }

    .fb-alerts {
        position: absolute;
        top: 0;
        left: 35%;
        width: 30%;
        padding: 0;
        z-index: 1100;
        .alert:first-child {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
    }
</style>
<template>
    <div id="app">
        <navbar ref="navbar"></navbar>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1">
                    <toolbar ref="toolbar"></toolbar>
                </div>
                <div class="col-md-11">
                     <workspace ref="workspace" v-if="!reload"></workspace>
                </div>
            </div>
        </div>
        <modal></modal>
        <div class="fb-alerts">
            <div v-for="alert in alerts"
                is="alert"
                :ref="alert.gid"
                :gid="alert.gid"></div>
        </div>
        <!-- 警告框遮罩, 用于操作确认类型的警告框时避免域外的操作引起的交互错误 -->
        <div class="fb-alerts-backdrop"
             :class="{ 'in': isBackdropIn }"
             v-if="isBackdropIn"></div>

        <loading ref="loading"></loading>
    </div>
</template>

<script>
    import _ from 'lodash'
    import { mapGetters, mapActions } from 'vuex'
    import Navbar from './components/Navbar.vue'
    import Toolbar from './components/Toolbar.vue'
    import Workspace from './components/Workspace.vue'
    import Modal from './components/Modal.vue'
    import Alert from './components/Alert.vue'
    import Loading from './components/Loading.vue'

    export default {
        name: 'app',
        components: {
            Navbar,
            Toolbar,
            Workspace,
            Modal,
            Alert,
            Loading
        },
        computed: {
            ...mapGetters({
                locale: 'locale',
                selector: 'selector',
                isUnitSelector: 'isUnitSelector',
                isModalShow: 'isModalShow',
                alerts: 'alerts',
                isBackdropIn: 'isBackdropIn',
                reload: 'reload'
            })
        },
        created () {
            // 设置 kendo 控件语言
            kendo.culture(this.locale)

            // 绑定按键事件
            window.addEventListener('keyup', this.globalKeyUpCallback)
        },
        methods: {
            ...mapActions({
                resetSelector: 'resetSelector',
                showModal: 'showModal',
                addAlertDefault: 'addAlertDefault',
                addAlertConfirm: 'addAlertConfirm'
            }),
            /**
             * 全局按键监听
             * @param e 触发事件的js对象
             */
            globalKeyUpCallback (e) {
                // esc && 模态框隐藏时
                if (e.keyCode === 27 && this.isModalShow === false) {
                    this.resetSelector()
                }
                // ? (shift + /)
                if (e.shiftKey && e.keyCode === 191) {
                    this.showHelp()
                }
                // enter && 控件高亮
                if (this.isUnitSelector === true && e.keyCode === 13) {
                    this.showSettings()
                }
            },
            showSettings () {
                this.showModal()
            }
        }
    }
</script>
